{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}{{ show_title() }} - 写新文章{% endblock %}

{%- block styles -%}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('blog.static', filename='editor.md/css/editormd.min.css') }}">
<link rel="stylesheet" type="text/css"
      href="{{ url_for('blog.static', filename='editor.md/css/editormd.logo.min.css') }}">
<link rel="stylesheet" type="text/css"
      href="{{ url_for('blog.static', filename='editor.md/css/editormd.preview.min.css') }}">
{% endblock %}

{% block page_content %}
{{- super() }}
<div class="container-fluid">
    <div class="write-article-body">
        {% if current_user.is_blogger %}
        {#
        <div class="form-write-article">{{ wtf.quick_form(form) }}</div>
        #}
        <div class="col-md-11" style="margin-bottom: 20px;margin-left: 100px;" id="article_new">
            <form action="{{url_for('blog.article_new')}}" method="post" class="form-group">
                <div style="display: none">
                    {{ form.csrf_token() }}
                </div>
                <div class="form-group">
                    <label for="title">文章标题</label>
                    {{ form.title(id='title', class="form-control") }}
                </div>
                <div class="form-group">
                    {{ form.intro(id = 'intro', class='form-control', placeholder='文章摘要') }}
                </div>
                <div class="form-group">
                    <label for="editormd-view">文章内容</label>
                    <div id="editormd-view">
                        {{ form.body(id='body') }}
                    </div>
                </div>
                <div class="form-group" id='cg-{{form.category.id}}'>
                    <label for="category">文章分类</label>
                    {{ form.category(id='category_name', class="form-control") }}
                    <span class="help-block" id='hl-{{form.category.id}}'></span>
                </div>
                <div class="form-group">
                    <label class="control-label" for="tags">文章标签</label>

                    <div class="input-group">
                        {{form.tags(id="tags", placeholder="以,分隔", class="form-control input-md", required="")}}
                    </div>
                </div>
                <div class="form-group" style="display: inline">
                    {{ form.submit(id='abc', class='btn btn-default') }}
                </div>
                <div style="display: none;">
                    {{ form.body_html(id='body_html') }}
                </div>
            </form>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
{{- pagedown.include_pagedown() -}}

<script src="{{ url_for('blog.static', filename='editor.md/editormd.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready( function() {
        var editor = editormd("editormd-view", {
            path : "{{url_for('blog.static', filename='editor.md/lib/')}}" ,// Autoload modules mode, dependents libs path
            pluginPath: "{{url_for('blog.static', filename='editor.md/plugins/')}}",
            height : 640,
{#            width: "90%",#}
            theme : "dark",
{#            previewTheme : "dark",#}
            codeFold : true,
            syncScrolling : "single",
{#            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启#}
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            imageUpload : true,
            saveHTMLToTextarea: true  // 用于将解析后的 HTML 保存到 Textarea，以供提交到后台程序
        });
        editor.setToolbarAutoFixed(false);  // toolbar 自动调位 禁用

        $('#abc').click(function () {
            //var msg = $('.editormd-preview').html()
            $('#body_html').val(editor.getHTML())
        });

    });


</script>
{% endblock %}
